const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 出口文件
    output: {
        filename: 'main.js',
        // 输出文件夹必须定义为绝对路径
        path: path.resolve(__dirname, 'dist'),
        // 打包前清理 dist 文件夹
        clean: true
    },
     // 插件
     plugins: [
        // 实例化 html-webpack-plugin 插件
        new HTMLWebpackPlugin({
            // 打包生成的文件的模板
            template: './index.html',
            // 打包生成的文件名称。默认为index.html
            // filename: 'app.html',
            // 设置所有资源文件注入模板的位置,可以设置的值 true|'head'|'body'|false,默认值为 true
            inject: 'body',
            // 在目标的html页面中添加meta标签
            meta: {
                keywords: 'webpack, webpack5',
                author: '小千千-千锋教育HTML5大前端教研院'
            },
            // 压缩html文件，生产环境默认为true,其余默认为false
            // 如果设置了 mode , 则不需要主动设置
            // minify: true
        })
    ],
    // 开发模式 -- development, 生产模式 -- production, 不使用任何默认优化选项 -- none
    mode: 'development',
    // 在开发模式下追踪代码
    devtool: 'inline-source-map',
    // 实现实时重新加载
    devServer: {
        static: './dist'
    },
    module: {
        rules: [{
            test: /\.png/,
            // 发送一个单独的文件并导出URL
            type: 'asset/resource'
        }]
    }
}